<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="startMove2.js"></script>
<style>
 *{margin:0;padding:0;list-style: none;}
 #ul1{width:400px;height:400px;border:1px solid black;margin:10px auto;overflow: hidden;}
 #ul1 li{border-bottom: 1px dashed #999; padding:4px;overflow: hidden;opacity: 0;}
</style>
<script>
window.onload=function(){
    var oBtn=document.getElementById('btn1');
    var oTxt=document.getElementById('txt1');
    var oUl=document.getElementById('ul1');
    oBtn.onclick=function(){
      var oLi=document.createElement('li');//创建一个‘空的’li
        oLi.innerHTML=oTxt.value;//然后再给li里面添加东西，li里面的值就是文本框里面的值
        oTxt.value='';//先让文本框里面的值为空
       // oUl.appendChild(oLi);//再把li放进ul中，appendChild放进去的元素，是一个个往子节点后面插入的
//        insetBefore(oLi,oUl.children[0]);是插入，元素是一个个往子节点前面插入的，oUl.children[0]表示父节点的第一个子节点
        if(oUl.children.length>0){//先做一个判断。如果oUl里面有一个li就执行下面这行代码
            oUl.insertBefore(oLi,oUl.children[0]);
        }
        else{//如果oUl里面没有一个li，就先放进去一个
            oUl.appendChild(oLi);
        }
 //    运动 想要添加的li高度变化，因为li里面的内容不定，所以高度也不确定，就需要先用offsetHeight的方式获取
   var iHeight=oLi.offsetHeight;//获取li的高度
        //alert(iHeight);
        oLi.style.height='0';
        startMove(oLi,{height:iHeight},function(){
            startMove(oLi,{opacity:100});
        });
    };
};
</script>
</head>
<body>
<textarea name="" id="txt1" cols="40" rows="4"></textarea>
<input type="button" name="" id="btn1" value="发布">
<ul id="ul1">
    <li>agdhfhgfd</li>
</ul>
</body>
</html>